import React, { useState, useEffect } from "react";





// import
const SkuTable = ({ dataSource, columns, setDataSource }) => {
    const [state, setState] = useState([])

    const onDelete = ({ key }) => {
        // console.log("要删除的key是：", key)
        let TempData = state.filter(item => item.key !== key)
        // console.log("删除过滤后剩余数据：", TempData)
        setDataSource([...TempData])
    }



    useEffect(() => {
        setState([...dataSource])
    }, [dataSource])
    return (
        <div className="table">
            <div className="table-head">
                {
                    columns.map((item, index) => <div className="col" key={index}>{item.title}</div>)
                }

            </div>
            <div className="table-body">
                {
                    state.map((dataItem, key) => {
                        return <div className="row" key={key}>
                            {
                                columns.map((item, i) => {
                                    return <span className="col" key={i}>
                                        {item.render ?
                                            <a onClick={() => onDelete({ key: dataItem.key })}>删除</a>
                                            :
                                            <span>{dataItem[item.dataIndex]}</span>
                                        }</span>
                                })
                            }

                        </div>
                    })
                }

            </div>
        </div>

    )
}
export default SkuTable;